import Layout from 'components/Layout';
import React from 'react';
import {useTags} from 'hooks/useTags';
import styled from 'styled-components';
import Icon from 'components/icon';
import {Link} from 'react-router-dom';
import {Button} from 'components/Button';
import {Center} from 'components/Center';
import {Space} from 'components/Space';

const TagList = styled.ol`
  font-size: 16px;
  background: white;
  > li{
    // #e5e5e5
    border-bottom: 1px solid #d5d5d5;
    line-height: 20px;
    margin-left: 16px;
    > a{
      padding: 12px 16px 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
`;

function Tags() {
    const {tags, addTag} = useTags()  //  useState
    return (
        <Layout>
            <TagList>
                {tags.map(tag =>
                    <li key={tag.id}>
                        <Link to={'/tags/' + tag.id}>
                            <span className="oneLine">{tag.name}</span>
                            <Icon name="right" />
                        </Link>
                    </li>
                )}
            </TagList>
            <Center>
                <Space />
                <Button onClick={addTag}>新建标签</Button>
            </Center>
        </Layout>
    );
}

export default Tags;